<template>
	<div class="css-text">
		<h2>宽度类</h2>
		<div class="fo-Gray mt10">一些使用宽度的css类封装</div>

		<h4 class="mt40">宽度/最大宽度/百分比</h4>
		<codeBox :list='list1'></codeBox>
		
		
		<h4 class="mt40">继承</h4>
		<codeBox :list='list2'></codeBox>
	</div>
</template>

<script>
	import codeBox from '@/views/components/codeBox.vue'
	export default {
		components:{
			codeBox
		},
		data() {
			return {
				list1:[
					
					{cssGroup: "width:10px;",class: "wid-10"},
					{cssGroup: "max-width:10px;",class: "max-wid-10"},
					{cssGroup: "min-width:10px;",class: "min-wid-10"},
					{cssGroup: "width:10%;",class: "wid-per-10"},
					{cssGroup: "width:100%;",class: "wid1p"},
					{cssGroup: "max-width:10%;",class: "max-wid-per-10"},
					{cssGroup: "min-width:10%;",class: "min-wid-per-10"},
				],
				list2:[
					{cssGroup: "width: inherit;",class: "wid-inh"}
				]
			}
		}
	}
</script>

<style lang="less" scoped>
	
</style>
